<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>社区评论信息管理</title>
  <!-- 引入layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <style>
    body {
      background-color: #F8FAFC;
      padding: 20px;
      margin: 0;
    }
    .layui-card {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.3s;
      margin-bottom: 20px;
    }
    .layui-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    .layui-card-header {
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .search-bar {
      padding: 15px 20px;
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
    }
    .layui-form-item {
      margin-bottom: 15px;
    }
    .layui-form-label {
      padding: 9px 15px;
      color: #334155;
      font-weight: 500;
    }
    .layui-input, .layui-select, .layui-textarea {
      border-radius: 4px;
      padding: 9px 15px;
    }
    .layui-btn {
      transition: all 0.2s;
      border-radius: 4px;
      cursor: pointer;
    }
    .layui-table {
      margin: 0;
      border-radius: 0 0 6px 6px;
    }
    .layui-table th {
      font-weight: 500;
      background-color: #F8FAFC;
    }
    .layui-table tr:hover {
      background-color: #F8FAFC;
    }
    .status-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: 500;
    }
    .status-normal {
      background-color: #ECFDF5;
      color: #059669;
      border: 1px solid #D1FAE5;
    }
    .status-pending {
      background-color: #FEF3C7;
      color: #D97706;
      border: 1px solid #FDE68A;
    }
    .status-hidden {
      background-color: #FEE2E2;
      color: #DC2626;
      border: 1px solid #FECACA;
    }
    .operation-btns .layui-btn {
      margin-right: 5px;
    }
    .operation-btns .layui-btn:last-child {
      margin-right: 0;
    }
    .footer {
      text-align: center;
      color: #95A5A6;
      font-size: 12px;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #F1F5F9;
    }
    .layui-laypage .layui-laypage-curr .layui-laypage-em {
      background-color: #3B82F6;
    }
    .layui-laypage a:hover {
      color: #3B82F6;
    }
    .comment-content {
      max-width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .article-title {
      max-width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .comment-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 0 20px 15px;
    }
    .stat-item {
      flex: 1;
      min-width: 150px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 15px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .stat-value {
      font-size: 24px;
      font-weight: 600;
      color: #1E293B;
      margin: 5px 0;
    }
    .stat-label {
      font-size: 14px;
      color: #64748B;
    }
    .stat-icon {
      font-size: 20px;
    }
    .detail-section {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px dashed #E2E8F0;
    }
    .detail-section:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    .detail-title {
      font-weight: 500;
      margin-bottom: 8px;
      color: #334155;
    }
  </style>
</head>
<body>
  <!-- 统计卡片 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-comments"></i> 评论统计</h3>
    </div>
    <div class="layui-card-body">
      <div class="comment-stats">
        <div class="stat-item">
          <div class="stat-icon" style="color: #3B82F6;"><i class="fa fa-comments"></i></div>
          <div class="stat-value">3,842</div>
          <div class="stat-label">总评论数</div>
        </div>
        <div class="stat-item">
          <div class="stat-icon" style="color: #10B981;"><i class="fa fa-check-circle"></i></div>
          <div class="stat-value">3,621</div>
          <div class="stat-label">正常显示</div>
        </div>
        <div class="stat-item">
          <div class="stat-icon" style="color: #F59E0B;"><i class="fa fa-clock-o"></i></div>
          <div class="stat-value">48</div>
          <div class="stat-label">待审核</div>
        </div>
        <div class="stat-item">
          <div class="stat-icon" style="color: #EF4444;"><i class="fa fa-eye-slash"></i></div>
          <div class="stat-value">173</div>
          <div class="stat-label">已隐藏</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 评论管理主内容区域 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-commenting-o"></i> 社区评论信息管理</h3>
      <div>
        <button class="layui-btn layui-btn-primary" id="batchOperationBtn">
          <i class="fa fa-cog"></i> 批量操作
        </button>
      </div>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-bar layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">评论ID</label>
          <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="commentId" placeholder="评论ID" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">文章标题</label>
          <div class="layui-input-inline" style="width: 180px;">
            <input type="text" name="articleTitle" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">评论用户</label>
          <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="commentUser" placeholder="用户名" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">评论状态</label>
          <div class="layui-input-inline">
            <select name="status">
              <option value="">全部状态</option>
              <option value="normal">正常显示</option>
              <option value="pending">待审核</option>
              <option value="hidden">已隐藏</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">评论时间</label>
          <div class="layui-input-inline" style="width: 220px;">
            <input type="text" name="commentTimeRange" placeholder="请选择评论时间范围" autocomplete="off" class="layui-input" id="commentTimeRange">
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn" lay-submit lay-filter="searchBtn"><i class="fa fa-search"></i> 搜索</button>
          <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i> 重置</button>
        </div>
      </div>
    </div>
    
    <!-- 评论列表表格 -->
    <table class="layui-table" lay-size="sm">
      <thead>
        <tr>
          <th style="width: 40px;">
            <input type="checkbox" lay-skin="primary" id="checkAll">
          </th>
          <th>评论ID</th>
          <th>文章标题</th>
          <th>评论用户</th>
          <th>评论内容</th>
          <th>评论时间</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="4001">
          </td>
          <td>COM2023001</td>
          <td>
            <div class="article-title" title="深度学习在图像识别中的最新进展与应用">深度学习在图像识别中的最新进展与应用</div>
          </td>
          <td>liming</td>
          <td>
            <div class="comment-content" title="作者对CNN和RNN的对比分析很到位，请问有没有考虑过Transformer模型在图像识别中的应用？">作者对CNN和RNN的对比分析很到位，请问有没有考虑过Transformer模型...</div>
          </td>
          <td>2023-09-18 10:23</td>
          <td><span class="status-badge status-normal">正常显示</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="4001"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="4001"><i class="fa fa-eye-slash"></i> 隐藏</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="4002">
          </td>
          <td>COM2023002</td>
          <td>
            <div class="article-title" title="高校科研项目管理系统的设计与实现">高校科研项目管理系统的设计与实现</div>
          </td>
          <td>wanghong</td>
          <td>
            <div class="comment-content" title="这个系统设计太垃圾了，完全不符合实际需求，作者根本不懂科研管理！">这个系统设计太垃圾了，完全不符合实际需求，作者根本不懂科研管理！</div>
          </td>
          <td>2023-09-17 16:45</td>
          <td><span class="status-badge status-pending">待审核</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="4002"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="4002"><i class="fa fa-check"></i> 通过</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="4002"><i class="fa fa-eye-slash"></i> 隐藏</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="4003">
          </td>
          <td>COM2023003</td>
          <td>
            <div class="article-title" title="2023年度人工智能领域学术会议汇总">2023年度人工智能领域学术会议汇总</div>
          </td>
          <td>zhaoli</td>
          <td>
            <div class="comment-content" title="感谢分享，请问 NeurIPS 2023 的投稿截止日期有没有更新？官网上显示有变动">感谢分享，请问 NeurIPS 2023 的投稿截止日期有没有更新？</div>
          </td>
          <td>2023-09-16 09:12</td>
          <td><span class="status-badge status-normal">正常显示</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="4003"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="4003"><i class="fa fa-eye-slash"></i> 隐藏</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="4004">
          </td>
          <td>COM2023004</td>
          <td>
            <div class="article-title" title="大数据分析在科研项目评估中的应用研究">大数据分析在科研项目评估中的应用研究</div>
          </td>
          <td>sunjie</td>
          <td>
            <div class="comment-content" title="数据来源有问题，国家社科基金的评估指标去年已经调整了，作者用的还是旧数据">数据来源有问题，国家社科基金的评估指标去年已经调整了...</div>
          </td>
          <td>2023-09-15 14:30</td>
          <td><span class="status-badge status-normal">正常显示</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="4004"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="4004"><i class="fa fa-eye-slash"></i> 隐藏</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="4005">
          </td>
          <td>COM2023005</td>
          <td>
            <div class="article-title" title="研究生学术论文写作指南">研究生学术论文写作指南</div>
          </td>
          <td>chenqi</td>
          <td>
            <div class="comment-content" title="这篇指南非常实用，对我们这些刚入学的研究生帮助很大，谢谢作者！">这篇指南非常实用，对我们这些刚入学的研究生帮助很大，谢谢作者！</div>
          </td>
          <td>2023-09-14 11:05</td>
          <td><span class="status-badge status-hidden">已隐藏</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="4005"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="4005"><i class="fa fa-check"></i> 显示</button>
          </td>
        </tr>
      </tbody>
    </table>
    
    <!-- 分页区域 -->
    <div style="text-align: right; padding: 15px 20px; border-top: 1px solid #F1F5F9;">
      <div class="layui-box layui-laypage layui-laypage-default">
        <a href="javascript:;" class="layui-laypage-prev layui-disabled">上一页</a>
        <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <span class="layui-laypage-spr">…</span>
        <a href="javascript:;">39</a>
        <a href="javascript:;" class="layui-laypage-next">下一页</a>
        <span class="layui-laypage-count">共 3842 条</span>
      </div>
    </div>
  </div>
  
  <!-- 页脚信息 -->
  <div class="footer">
    © 高校科研社区管理系统 - 版权所有
  </div>

  <!-- 评论详情弹窗 -->
  <div class="layui-modal" id="commentDetailModal" style="display: none; width: 700px; margin-left: -350px;">
    <div class="layui-modal-title">评论详情</div>
    <div class="layui-modal-body" style="padding: 20px; max-height: 500px; overflow-y: auto;">
      <div id="commentDetailContent">
        <!-- 详情内容将通过JS动态填充 -->
      </div>
    </div>
    <div class="layui-modal-footer">
      <button class="layui-btn" id="closeDetailModal">关闭</button>
    </div>
  </div>
  
  <!-- 批量操作弹窗 -->
  <div class="layui-modal" id="batchOperationModal" style="display: none; width: 500px; margin-left: -250px;">
    <div class="layui-modal-title">批量操作</div>
    <div class="layui-modal-body" style="padding: 20px;">
      <form class="layui-form" id="batchOperationForm">
        <div class="layui-form-item">
          <label class="layui-form-label">操作类型</label>
          <div class="layui-input-block">
            <select name="operationType" lay-verify="required">
              <option value="">请选择操作</option>
              <option value="show">设置为正常显示</option>
              <option value="hide">隐藏评论</option>
            </select>
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">操作原因</label>
          <div class="layui-input-block">
            <textarea name="operationReason" placeholder="请输入操作原因（可选）" class="layui-textarea" rows="4"></textarea>
          </div>
        </div>
        
        <div class="layui-form-item" style="margin-top: 20px;">
          <div class="layui-input-block">
            <div class="layui-form-mid layui-word-aux" id="selectedCount">已选择 <span style="color: #3B82F6;">0</span> 条评论</div>
          </div>
        </div>
      </form>
    </div>
    <div class="layui-modal-footer">
      <button class="layui-btn layui-btn-primary" id="cancelBatchOperation">取消</button>
      <button class="layui-btn" lay-submit lay-filter="submitBatchOperation">确认操作</button>
    </div>
  </div>

  <!-- 引入layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    // 初始化layui模块
    layui.use(['form', 'laydate', 'layer'], function() {
      const form = layui.form;
      const laydate = layui.laydate;
      const layer = layui.layer;
      
      // 渲染表单
      form.render();
      
      // 初始化日期范围选择器
      laydate.render({
        elem: '#commentTimeRange',
        range: true,
        theme: 'molv'
      });
      
      // 全选/取消全选
      form.on('checkbox(#checkAll)', function(data) {
        const checked = data.elem.checked;
        document.querySelectorAll('tbody [type="checkbox"]').forEach(checkbox => {
          checkbox.checked = checked;
        });
        form.render('checkbox');
        updateSelectedCount();
      });
      
      // 单选框选择事件
      document.querySelectorAll('tbody [type="checkbox"]').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
          // 检查是否所有单选框都被选中
          const allChecked = document.querySelectorAll('tbody [type="checkbox"]:checked').length === 
                            document.querySelectorAll('tbody [type="checkbox"]').length;
          document.getElementById('checkAll').checked = allChecked;
          form.render('checkbox');
          updateSelectedCount();
        });
      });
      
      // 更新选中数量
      function updateSelectedCount() {
        const count = document.querySelectorAll('tbody [type="checkbox"]:checked').length;
        document.querySelector('#selectedCount span').innerText = count;
      }
      
      // 搜索按钮
      form.on('submit(searchBtn)', function(data) {
        // 模拟搜索操作
        layer.msg('搜索条件已提交', {icon: 0, time: 1000});
        return false;
      });
      
      // 查看评论详情
      document.querySelectorAll('.operation-btns .layui-btn-primary:first-child').forEach(btn => {
        btn.addEventListener('click', function() {
          const commentId = this.getAttribute('data-id');
          const tr = this.closest('tr');
          const articleTitle = tr.querySelector('.article-title').title;
          const commentUser = tr.querySelector('td:nth-child(4)').innerText;
          const commentContent = tr.querySelector('.comment-content').title;
          const commentTime = tr.querySelector('td:nth-child(6)').innerText;
          const statusText = tr.querySelector('td:nth-child(7)').innerText;
          
          // 构建详情内容
          const detailContent = `
            <div class="detail-section">
              <div class="detail-title">基本信息</div>
              <table class="layui-table" lay-size="sm">
                <tr>
                  <td style="width: 100px; background-color: #F8FAFC;">评论ID</td>
                  <td>${commentId}</td>
                </tr>
                <tr>
                  <td style="background-color: #F8FAFC;">评论用户</td>
                  <td>${commentUser}</td>
                </tr>
                <tr>
                  <td style="background-color: #F8FAFC;">评论时间</td>
                  <td>${commentTime}</td>
                </tr>
                <tr>
                  <td style="background-color: #F8FAFC;">当前状态</td>
                  <td>${statusText}</td>
                </tr>
              </table>
            </div>
            
            <div class="detail-section">
              <div class="detail-title">关联文章</div>
              <div style="padding-left: 15px;">
                <p><strong>标题：</strong>${articleTitle}</p>
                <p style="margin-top: 5px;"><a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">查看原文</a></p>
              </div>
            </div>
            
            <div class="detail-section">
              <div class="detail-title">评论内容</div>
              <div style="padding: 15px; background-color: #F8FAFC; border-radius: 4px; border-left: 3px solid #3B82F6;">
                ${commentContent}
              </div>
            </div>
            
            <div class="detail-section">
              <div class="detail-title">操作记录</div>
              <div class="layui-timeline">
                <div class="layui-timeline-item">
                  <i class="layui-icon layui-timeline-axis"></i>
                  <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">${commentTime}</h3>
                    <p>用户发表评论</p>
                  </div>
                </div>
              </div>
            </div>
          `;
          
          // 填充详情并显示弹窗
          document.getElementById('commentDetailContent').innerHTML = detailContent;
          document.getElementById('commentDetailModal').style.display = 'block';
        });
      });
      
      // 关闭详情弹窗
      document.getElementById('closeDetailModal').addEventListener('click', function() {
        document.getElementById('commentDetailModal').style.display = 'none';
      });
      
      // 处理评论状态变更（通过/显示/隐藏）
      document.querySelectorAll('.operation-btns .layui-btn:not(.layui-btn-primary:first-child)').forEach(btn => {
        btn.addEventListener('click', function() {
          const commentId = this.getAttribute('data-id');
          const action = this.innerHTML.includes('通过') || this.innerHTML.includes('显示') ? 'show' : 'hide';
          const actionText = this.innerHTML.includes('通过') ? '通过审核' : 
                            (this.innerHTML.includes('显示') ? '正常显示' : '隐藏');
          const tr = this.closest('tr');
          const commentContent = tr.querySelector('.comment-content').title.substring(0, 20) + '...';
          
          // 确认操作
          layer.confirm(`确定要将评论"${commentContent}"设置为${actionText}吗？`, {
            title: '确认操作',
            btn: ['确定', '取消']
          }, function(index) {
            layer.close(index);
            layer.load();
            
            // 模拟处理
            setTimeout(function() {
              layer.closeAll('loading');
              layer.msg(`评论已${actionText}`, {icon: 1, time: 1500});
              
              // 更新状态和操作按钮
              const statusCell = tr.querySelector('td:nth-child(7)');
              const operationCell = tr.querySelector('td:nth-child(8)');
              
              if (action === 'show') {
                // 更新为正常显示状态
                statusCell.innerHTML = '<span class="status-badge status-normal">正常显示</span>';
                operationCell.innerHTML = `
                  <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="${commentId}"><i class="fa fa-eye"></i> 查看</button>
                  <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="${commentId}"><i class="fa fa-eye-slash"></i> 隐藏</button>
                `;
              } else {
                // 更新为隐藏状态
                statusCell.innerHTML = '<span class="status-badge status-hidden">已隐藏</span>';
                operationCell.innerHTML = `
                  <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="${commentId}"><i class="fa fa-eye"></i> 查看</button>
                  <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="${commentId}"><i class="fa fa-check"></i> 显示</button>
                `;
              }
              
              // 为新按钮绑定事件
              bindNewButtons(operationCell, commentId);
            }, 800);
          });
        });
      });
      
      // 为新生成的按钮绑定事件
      function bindNewButtons(cell, commentId) {
        // 查看按钮
        cell.querySelector('.layui-btn-primary:first-child').addEventListener('click', function() {
          // 触发查看详情
          this.click();
        });
        
        // 操作按钮
        const actionBtn = cell.querySelector('.layui-btn:not(.layui-btn-primary)');
        actionBtn.addEventListener('click', function() {
          const action = this.innerHTML.includes('显示') ? 'show' : 'hide';
          const actionText = this.innerHTML.includes('显示') ? '正常显示' : '隐藏';
          const tr = this.closest('tr');
          const commentContent = tr.querySelector('.comment-content').title.substring(0, 20) + '...';
          
          // 确认操作
          layer.confirm(`确定要将评论"${commentContent}"设置为${actionText}吗？`, {
            title: '确认操作',
            btn: ['确定', '取消']
          }, function(index) {
            layer.close(index);
            layer.load();
            
            // 模拟处理
            setTimeout(function() {
              layer.closeAll('loading');
              layer.msg(`评论已${actionText}`, {icon: 1, time: 1500});
              
              // 更新状态和操作按钮
              const statusCell = tr.querySelector('td:nth-child(7)');
              const operationCell = tr.querySelector('td:nth-child(8)');
              
              if (action === 'show') {
                statusCell.innerHTML = '<span class="status-badge status-normal">正常显示</span>';
                operationCell.innerHTML = `
                  <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="${commentId}"><i class="fa fa-eye"></i> 查看</button>
                  <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="${commentId}"><i class="fa fa-eye-slash"></i> 隐藏</button>
                `;
              } else {
                statusCell.innerHTML = '<span class="status-badge status-hidden">已隐藏</span>';
                operationCell.innerHTML = `
                  <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="${commentId}"><i class="fa fa-eye"></i> 查看</button>
                  <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="${commentId}"><i class="fa fa-check"></i> 显示</button>
                `;
              }
              
              // 递归绑定事件
              bindNewButtons(operationCell, commentId);
            }, 800);
          });
        });
      }
      
      // 批量操作按钮
      document.getElementById('batchOperationBtn').addEventListener('click', function() {
        const checkedCount = document.querySelectorAll('tbody [type="checkbox"]:checked').length;
        
        if (checkedCount === 0) {
          layer.msg('请先选择需要操作的评论', {icon: 2, time: 1500});
          return;
        }
        
        // 更新选中数量
        updateSelectedCount();
        
        // 显示批量操作弹窗
        document.getElementById('batchOperationModal').style.display = 'block';
      });
      
      // 取消批量操作
      document.getElementById('cancelBatchOperation').addEventListener('click', function() {
        document.getElementById('batchOperationModal').style.display = 'none';
      });
      
      // 提交批量操作
      form.on('submit(submitBatchOperation)', function(data) {
        const operationType = data.field.operationType;
        const operationText = operationType === 'show' ? '正常显示' : '隐藏';
        const checkedCount = document.querySelectorAll('tbody [type="checkbox"]:checked').length;
        
        // 隐藏弹窗
        document.getElementById('batchOperationModal').style.display = 'none';
        
        // 模拟处理
        layer.load();
        
        setTimeout(function() {
          layer.closeAll('loading');
          layer.msg(`已成功将${checkedCount}条评论设置为${operationText}`, {icon: 1, time: 1500});
          
          // 更新选中评论的状态
          document.querySelectorAll('tbody [type="checkbox"]:checked').forEach(checkbox => {
            const tr = checkbox.closest('tr');
            const statusCell = tr.querySelector('td:nth-child(7)');
            const operationCell = tr.querySelector('td:nth-child(8)');
            const commentId = checkbox.getAttribute('data-id');
            
            if (operationType === 'show') {
              statusCell.innerHTML = '<span class="status-badge status-normal">正常显示</span>';
              operationCell.innerHTML = `
                <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="${commentId}"><i class="fa fa-eye"></i> 查看</button>
                <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="${commentId}"><i class="fa fa-eye-slash"></i> 隐藏</button>
              `;
            } else {
              statusCell.innerHTML = '<span class="status-badge status-hidden">已隐藏</span>';
              operationCell.innerHTML = `
                <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="${commentId}"><i class="fa fa-eye"></i> 查看</button>
                <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="${commentId}"><i class="fa fa-check"></i> 显示</button>
              `;
            }
            
            // 为新按钮绑定事件
            bindNewButtons(operationCell, commentId);
            
            // 取消选中状态
            checkbox.checked = false;
          });
          
          // 取消全选状态
          document.getElementById('checkAll').checked = false;
          form.render('checkbox');
        }, 1000);
        
        return false;
      });
    });
  </script>
</body>
</html>
